// 访客列表的详情
import { useSearchParams } from "react-router-dom";
import { useEffect, useState } from "react";
import { Image } from 'antd';
import { details } from "../../api/visitorList";
import "../../css/list_particulars.css";

const Particulars = () => {
  // 父组件跳转来的数据
  const [query] = useSearchParams()
  const [id, setid] = useState(query.get('id'))
  console.log(id);

  const [list, setlist]: any = useState([])
  const details2 = async () => {
    let res = await details({ id: id })
    console.log(res);
    setlist(res.data)
  }

  useEffect(() => {
    details2()
  }, [id])

  return (
    <>
      <div className="listParticu">

        {/* 左边 */}
        <div className="left">
          <div className="visitor">
            访客：{list.username}
          </div>
          <div className="department">
            部门：{list.department}
          </div>
          <div className="mobile">
            手机号：{list.mobile}
          </div>
          <div className="card">
            身份证号：{list.card}
          </div>
          <div className="carnumber">
            车牌号：{list.carnumber}
          </div>
          <div className="addtime">
            进校时间：{list.addtime}
          </div>
          <div className="endtime">
            离校时间：{list.endtime}
          </div>
          <div className="status">
            状态：{list.status===3? '终审通过' : '' || 2? '二审通过' : '' || 1? '初审' : ''}
          </div>
          <div className="typename">
            类型：{list.type===1? '外来人员' : '' || 2? '老师' : '' || 3? '学生' : ''}
          </div>
          <div className="haveTraveledToHighRiskAreas">
            是否去过高风险地区：{list.is_leave===0? '否' : '是'}
          </div>
          <div className="haveTraveledToHighRiskAreas">
            是否接触过高风险区：{list.is_send===0? '否' : '是'}
          </div>
          <div className="haveTraveledToHighRiskAreas">
            是否离京：{list.iscancel===0? '否' : '是'}
          </div>
          <div className="location">
            地址：{list.address}
          </div>
        </div>

        {/* 右边 */}
        <div className="right">

          <div className="">
            <span>行程码：</span>
            <Image
              width={100}
              src={list.healthcode}
              fallback=""
            />
          </div>

          <div className="">
            <span>健康码：</span>
            <Image
              width={100}
              src={list.nucleicacid}
              fallback=""
            />
          </div>

          <div className="">
            <span>核酸：</span>
            <Image
              width={100}
              src={list.travelcode}
              fallback=""
            />
          </div>

          <div className="">
            <span>疫苗：</span>
            <Image
              width={100}
              src={list.vaccination}
              fallback=""
            />
          </div>

        </div>

      </div>
    </>
  )
}

export default Particulars